<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
  		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>网站后台管理模版</title>
		<link rel="stylesheet" type="text/css" href="../../assets/libs/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css"/>
	</head>
	<body>
		<div class="wrap-container welcome-container">
			<div class="row">
				<div class="welcome-left-container col-lg-9">
					<div class="data-show">
						<ul class="clearfix">
							<li class="col-sm-12 col-md-4 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-org f-l">
										<span class="iconfont">&#xe606;</span>
									</div>
									<div class="right-text-con">
										<p class="name">用户</p>
										<p><span class="color-org">89</span>数据<span class="iconfont">&#xe628;</span></p>
									</div>
								</a>
							</li>
							<li class="col-sm-12 col-md-4 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-blue f-l">
										<span class="iconfont">&#xe602;</span>
									</div>
									<div class="right-text-con">
										<p class="name">留言</p>
										<p><span class="color-blue">189</span>数据<span class="iconfont">&#xe628;</span></p>
									</div>
								</a>
							</li>
							<li class="col-sm-12 col-md-4 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-green f-l">
										<span class="iconfont">&#xe605;</span>
									</div>
									<div class="right-text-con">
										<p class="name">预约案例</p>
										<p><span class="color-green">221</span>数据<span class="iconfont">&#xe60f;</span></p>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<!--图表-->
					<div class="chart-panel panel panel-default">
						<div class="panel-body" id="chart" style="height: 376px;">
						</div>
					</div>

				<div class="welcome-edge col-lg-3">
					<!--最新留言-->
					<script id="demo" type="text/html">
					<div class="panel panel-default comment-panel">
						<div class="panel-header">最新留言</div>
						<div class="panel-body">
							<div class="commentbox">
								<ul class="commentList">
									{{#  layui.each(d.list, function(index, item){ }}
								  <li class="item cl"> <a href="javascript:;"><i class="avatar size-L radius"></i></a>
								    <div class="comment-main">
								      <header class="comment-header">
								        <div class="comment-meta">{{item.uName}} 留言于
								          <time >{{item.uTime}}</time>
								        </div>
								      </header>
								      <div class="comment-body">
								        <p>{{item.uMessage}}</p>
								      </div>
								    </div>
								  </li>
									{{#  }); }}
								</ul>
							</div>
							<div id="pagesbox" style="text-align: center;padding-top: 5px;">
								
							</div>
						</div>
					</div>
					</script>
					<div id="view"></div>
					<!--联系-->
<!--					<div class="panel panel-default contact-panel">-->
<!--						<div class="panel-header">联系我们</div>-->
<!--						<div class="panel-body">-->
<!--							<p>QQ：1465465646</p>-->
<!--							<p>E-mail:4565564@qq.com</p>-->
<!--						</div>-->
<!--					</div>-->
				</div>
			</div>
		</div>
		</div>
		<script src="../../assets/libs/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/admin/lib/echarts/echarts.js"></script>
		<script src="../../assets/js/my.js"></script>
		<script type="text/javascript">

			layui.use(['layer','jquery','laytpl'], function(){
				var layer 	= layui.layer;
				var $=layui.jquery;
				var laytpl=layui.laytpl;
				//laytpl
				var data=null;
				$.get(host+'/userservlet/content',function (r) {
					data=r
					var getTpl = demo.innerHTML

					laytpl(getTpl).render(data, function(html){
						$('#view').html(html);
					});
				},'json')

				//图表
				 var jsonarr=[];
				  var umessage=0;
				  var uname=0;
				  var utime=0;
				var myChart;
				$.get('data.json',function (r) {
					for(var i =0 ;i < r.length;i++){
						jsonarr[i] = r[i];
					}
				});

				 $.get(host+'/userservlet/umessagecount',function (r) {
				 	umessage=r;
				 },'json');

				$.get(host+'/userservlet/unamecount',function (r) {
					uname=r;
				},'json');

				$.get(host+'/userservlet/utime',function (r) {
					utime=r;
				},'json');

				require.config({
				    paths: {
				        echarts: '../../static/admin/lib/echarts'
				    }
				});
				require(
				    [
				        'echarts',
				        'echarts/chart/bar',
				        'echarts/chart/line',
				        'echarts/chart/map',
						'echarts/chart/tree'
				    ],
				    function (ec) {
				        //--- 折柱 ---
				        myChart = ec.init(document.getElementById('chart'));
				        myChart.setOption(
				        	{
						     title: {
						        text: "数据统计",
						        textStyle: {
						            color: "rgb(85, 85, 85)",
						            fontSize: 18,
						            fontStyle: "normal",
						            fontWeight: "normal"
						        }
						    },
						    tooltip: {
						        trigger: "axis"
						    },
						    legend: {
						        data: ["用户", "留言", "预约"],
						        selectedMode: false,
						    },
						    toolbox: {
						        show: true,
						        feature: {
						            dataView: {
						                show: false,
						                readOnly: true
						            },
						            magicType: {
						                show: false,
						                type: ["line", "bar", "stack", "tiled"]
						            },
						            restore: {
						                show: true
						            },
						            saveAsImage: {
						                show: true
						            },
						            mark: {
						                show: false
						            }
						        }
						    },
						    calculable: false,
						    xAxis: [
						        {
						            type: "category",
						            boundaryGap: false,
						            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
						        }
						    ],
						    yAxis: [
						        {
						            type: "value"
						        }
						    ],
						     grid: {
						        x2: 30,
						        x: 50
						    },
						    series: [
						        {
						            name: "用户",
						            type: "line",
						            smooth: true,
						            itemStyle: {
						                normal: {
						                    areaStyle: {
						                        type: "default"
						                    }
						                }
						            },
						            // data:[10,24,59,90,91,640,469]
									data:[uname+90,uname+890,uname+59,uname+90,uname+91,uname+640,uname+469]
						        },
						        {
						            name: "留言",
						            type: "line",
						            smooth: true,
						            itemStyle: {
						                normal: {
						                    areaStyle: {
						                        type: "default"
						                    }
						                }
						            },
						            data: [umessage+50, umessage+137, umessage+434, umessage+791, umessage+390, umessage+30, umessage+10]
						        },
						        {
						            name: "预约",
						            type: "line",
						            smooth: true,
						            itemStyle: {
						                normal: {
						                    areaStyle: {
						                        type: "default"
						                    },
						                    color: "rgb(110, 211, 199)"
						                }
						            },
						            data: [utime+1320, utime+1132, utime+601, utime+234, utime+120, utime+90, utime+20]
						        }
						    ]
						}
				        );
					}
				);
				$(window).resize(function(){
					myChart.resize();
				})
			});
		</script>
	</body>
</html>
